import { Callout } from "nextra-theme-docs";

# `@stackflow/plugin-google-analytics-4`

구글 애널리틱스 4를 스택플로우와 통합하는 데 사용되는 플러그인이에요.

## 설치

```bash npm2yarn copy
npm install @stackflow/plugin-google-analytics-4
```

## 사용법
### 초기화

```tsx showLineNumbers filename="stackflow.ts" copy
import { stackflow } from "@stackflow/react";
import { googleAnalyticsPlugin } from "@stackflow/plugin-google-analytics-4";

const { Stack, useFlow } = stackflow({
  activities: {
    // ...
  },
  plugins: [
    googleAnalyticsPlugin({
      trackingId: "G-XXXXXXXXXX", // Required. Your Google Analytics 4 Tracking ID
      userInfo: {
        // optional
        userId: "test123", // Your own user distinguishable id. (https://bit.ly/3VGu04K)
        userProperties: {
          // ...
          // You can add additional event parameters. This value will collected as a user properties of "Custom Dimension" in GA.
          // https://bit.ly/3uQbriR
        },
      },
      useTitle: true, // Optional. If true, the title of the current screen will be sent to GA. if false, ActivityName will be sent to GA.(default false).
    }),
  ],
});
```

### config 세팅

```tsx showLineNumbers filename="App.tsx" copy
import { useGoogleAnalyticsContext } from "@stackflow/plugin-google-analytics-4";

const App = () => {
  const { setConfig } = useGoogleAnalyticsContext();

  useEffect(() => {
    setConfig({
      user_id: "test123",
      user_properties: {
        // ...
      },
      // ...
      //  GA4 config values.
      // https://bit.ly/3Y7IXhV
    });
  }, []);

  return <div>...</div>;
};
```

### 이벤트 보내기

모든 스택은 컨텍스트로 래핑되어 있으므로 이벤트를 보내려면 `useGoogleAnalyticsContext` 훅을 사용할 수 있어요.

```tsx showLineNumbers filename="AdCreateButton.tsx" copy
import { useGoogleAnalyticsContext } from "@stackflow/plugin-google-analytics-4";
// ...
const { sendEvent } = useGoogleAnalyticsContext();

return (
  <>
    <button
      onClick={() => {
        sendEvent("click_ad_creaet_new_ad", {
          advertiser_id: "DEBUG_AARON",
        });
      }}
    >
      광고 만들기
    </button>
  </>
);
```

상단 코드에서 보낸 사용자 정의 GA4 이벤트의 예시예요.

두번째 매개변수 객체는 사용자 정의 이벤트 매개변수로 전송돼요.

![image](https://user-images.githubusercontent.com/29659112/206271251-91f63efa-0583-4846-b4d5-79ed2ff0a881.png)

<Callout>
FAQ: **Pageview event가 두 번씩 발생하는 이슈가 있어요.**

GA4 설정에서 "Page changes based on browser history events"를 해제하세요. (**_Web Stream>Enhanced Measurement>Pageviews>Advanced_**)

이 플러그인은 스택플로우의 "[Effect Hook](/ko/docs/advanced/write-plugin#%EC%9D%B4%ED%8E%99%ED%8A%B8-%ED%9B%85)"을 사용하여 페이지뷰 이벤트를 수동으로 트리거해요. 다시 트리거할 필요가 없어요.

![image](https://user-images.githubusercontent.com/29659112/206275171-57270f54-ac1c-4e0d-b58c-916a842c99b8.png)
</Callout>